<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #result{
            border: solid 1px red;
            width: 300px;
            height: 300px;
            margin-top: 20px;
            text-align: center;
            line-height: 300px;
        }
        #check .btn{
            margin:8px 0;
        }
        #check .txt{
            margin: 5px 0;
        }
    </style>
</head>
<body>
    <div id="check">
        <h3>输入文字的验证:</h3>
        <input type="text" id="txt" class="txt" placeholder="请输入字符串内容">
        <div class="btn">
            <button onclick="bb()">验证</button>
        </div>
        <div id="result">
            
        </div>
    </div>
    <script>
        function bb(){
            //分别获取元素对象并保存在变量中
            var txt = document.getElementById("txt");
            var res = document.getElementById("result");
            //根据文本框获取的值进行判断
            var num = txt.value;
            //Number(num) 如果是数字，返回数字 否则返回NaN
            //isNaN(num) 如果是数字返回false 否则返回True
            var isNum = isNaN(Number(num))?false:true;
            res.innerText = isNum?'数字':'字符';
        }
        
    </script>
</body>
</html>